<template>
  <div class="color-box">
    <div @click="emit('change', item)" v-for="item in colorData" :key="item.hex" class="color-item" :style="{ borderColor: item.hex }">
      <p class="color-zh">
        {{ item.name }}
      </p>
      <p class="color-pin">
        {{ item.pinyin }}
      </p>
      <p class="color-hex" :style="{ backgroundColor: item.hex }">
        {{ item.hex }}
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';
  import getColors, { colorItem } from '@mock/getColors';
  const colorData: Array<colorItem> = reactive(getColors());

  const emit = defineEmits(['change']);
</script>

<style lang="scss" scoped>
  .color-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: hidden;
    margin: 0 auto;
    padding-top: 20px;
    width: $mainWidth;
  }
  .color-item {
    border: 1px solid;
    border-left: 15px solid;
    border-radius: 5px;
    width: 10%;
    display: inline-block;
    padding: 10px;
    margin-bottom: 20px;
    cursor: pointer;
    > p {
      font-family: '楷体';
    }
    .color-zh {
      font-size: 18px;
      font-weight: bold;
    }
    .color-pin {
      text-align: right;
      line-height: 22px;
    }
    .color-hex {
      text-align: center;
      line-height: 26px;
    }
  }
</style>
